<template>
  <div class="page has-navbar" v-nav="{ title: '直播配置' ,showBackButton: true, onBackButtonClick: back }">
    <div class="page-content text-center">

      <main id="liverInfo">
        <div class="head">
          <von-input placeholder="直播标题" v-model="video.liveTitle" label="直播标题" autocomplete="false"></von-input>

          <div class="von-input-wrapper" autocomplete="false">
            <label class="item item-borderless item-input von-input">
              <div class="hairline-top"></div>
              <span class="input-label">推流地址</span>
              <span class="value">{{ generateLivePath }}</span>
              <div class="hairline-bottom"></div>
            </label>
          </div>
        </div>
        <div class="bodyer">
          <md-button
            class="md-button button button-positive" :class="{'disbale-btn':!!video.liveStatus}"
            @click.native="openVideo">开启直播
          </md-button>
          <md-button
            class="md-button button button-assertive" :class="{'disbale-btn':!video.liveStatus}"
            @click.native="closeVideo">关闭直播
          </md-button>
        </div>
      </main>

    </div>
  </div>
</template>
<script>
  import {
    mapGetters
  } from 'vuex'

  export default {
    name: "liver",
    data() {
      return {
        video: {
          liveTitle: ''
        }
      };
    },
    mounted() {
      this.queryVideo()
    },
    computed: {
      ...mapGetters([
        'userInfo',
        'videoInfo',
      ]),
      generateLivePath() {
        return this.userInfo ? `rtmp://v.godd.site:1935/live/${this.userInfo.id}` : '';
      }
    },
    methods: {
      back() {
        $router.back("/");
      },
      queryVideo() {
        this.$ajax.get(`/video/liveStatus/${this.userInfo.id}`).then((res) => {
          if (res.data) {
            this.video = res.data
          }
        })
      },
      openVideo() {
        this.$ajax({
          method: 'post',
          url: 'video/live/open',
          data: Object.assign(this.video, {
            userId: this.userInfo.id,
          })
        }).then((res) => {
          $toast.show("直播已开启,请使用OBS推流到指定直播地址!", 5000);
          this.queryVideo();
        })
      },
      closeVideo() {
        this.$ajax({
          method: 'post',
          url: 'video/live/close',
          data: this.video
        }).then((res) => {
          $toast.show("直播已停止,请停止OBS推流!", 5000);
          this.queryVideo();
        })
      }
    }
  };

</script>

<style lang="scss">
  #liverInfo {
    height: 100%;
    display: flex;
    flex-direction: column;
    .head {
      display: flex;
      flex-direction: column;
      background: #fff;
      position: relative;
      box-shadow: 0 0 10px 0;
    }
    .bodyer {
      flex: 1;
      padding-top: 30px;
      .md-button + .md-button {
        margin-left: 30px;
      }
    }
  }

  .disbale-btn {
    background-color: rgb(204, 204, 204) !important;
  }
</style>
